<template>
  <div class="h-full">
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template v-if="episode" #header-top>
        <div class="text-center text-xl font-bold pr-20">管理《{{ seriesname }}》第{{ episode }}集的评论</div>
      </template>
    </fs-crud>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useFs, dict } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';
const route = useRoute();

const episode = ref('');
const seriesname = ref('');

const apiPrefix = '/comment';
const context: any = {
  episode: ref(''),
  apiPrefix,
  columns: {
    _index: {
      title: '序号',
      form: { show: false },
      column: {
        // type: "index",
        align: 'center',
        width: '55px',
        columnSetDisabled: true,
        formatter: context => {
          const index = context.index ?? 1;
          return index;
        }
      }
    },
    context: {
      title: '评论内容',
      type: 'textarea',
      column: {
        width: 400
      },
      search: { show: true }
    },
    username: {
      title: '用户名',
      type: 'text'
    },
    objType: {
      title: '对象类型',
      type: 'dict-switch',
      form: {
        value: false
      },
      dict: dict({
        data: [
          { value: 0, label: '短剧' },
          { value: 1, label: '分集' }
        ]
      })
    },
    objId: {
      title: '对象ID',
      type: 'text',
      column: {
        width: 220
      }
    },
    order: {
      title: '排序',
      type: 'number',
      // column: {
      // 	sorter: "custom",
      // 	defaultSortOrder: "descend",
      // },
      form: {
        value: 1,
        component: {
          max: 10,
          min: 1
        }
      }
    },
    pass: {
      title: '状态',
      type: 'dict-switch',
      form: {
        value: false
      },
      dict: dict({
        data: [
          { value: true, label: '显示', color: 'success' },
          { value: false, label: '关闭', color: 'warning' }
        ]
      })
    }
  }
};

const { crudRef, crudBinding, crudExpose } = useFs({
  createCrudOptions,
  context
});

onMounted(() => {
  if (route.query.id) {
    console.log('onMounted...', route.query.id);
    context.episode.value = route.query.id;
    // crudBinding.value.columns.series.form.value = route.query.id;
  }
  if (route.query.episode) {
    episode.value = route.query.episode;
  }
  if (route.query.seriesname) {
    seriesname.value = route.query.seriesname;
  }

  crudExpose.doRefresh();
});
</script>
